<template>
  <div class="check-list">
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-row :gutter="15">
        <div
          style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
          "
        >
          <el-col :span="8">
            <el-form-item label="班级" prop="censusRegister">
              <el-input
                v-model="listData.className"
                :disabled="true"
                placeholder="请选择班级"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="日期" prop="birthday">
              <el-date-picker
                :disabled="true"
                clearable
                size="small"
                v-model="listData.monthTime"
                type="month"
                value-format="yyyy-MM"
                placeholder="请选择月份"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </div>
        <el-col :span="8">
          <el-form-item label="上月计划情况分析" prop="schoolName">
            <el-input
              v-model="listData.lastAnalysis"
              :disabled="true"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              placeholder=""
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="本月工作重点" prop="motherName">
            <el-input
              v-model="listData.workFocus"
              :disabled="true"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              placeholder=""
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <div
          style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
          "
        >
          <el-col :span="8">
            <el-form-item label="本月主题活动" prop="themeActivities">
              <el-input
                v-model="listData.themeActivities"
                :disabled="true"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                placeholder=""
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="本月家长工作" prop="parentWork">
              <el-input
                v-model="listData.parentWork"
                :disabled="true"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                placeholder=""
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </div>
      </el-row>
      <el-row :gutter="15">
        <!-- <p>活动课程</p> -->
        <p id="title1">五大领域园本课程</p>
        <el-col :span="8">
          <el-form-item label="领域" prop="sex">
            <el-select
              v-model="selectedCategory"
              :disabled="isDisabled"
              placeholder="请选择领域"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in categories"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <div
          v-if="selectedCategory"
          style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
          "
        >
          <el-col :span="8">
            <el-form-item label="活动名称" prop="name">
              <!-- <el-input v-model="form[selectedCategory + '_1']" :disabled='isDisabled' placeholder="请输入活动名称" type="textarea" :autosize="{minRows: 4, maxRows: 4}" clearable :style="{width: '100%'}">
            </el-input> -->
              <el-input
                v-model="activityData[selectedCategory].activityName"
                placeholder="请输入活动名称"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="活动目标" prop="age">
              <!-- <el-input v-model="form[selectedCategory + '_2']" :disabled='isDisabled' placeholder="请输入活动目标" type="textarea" :autosize="{minRows: 4, maxRows: 4}" clearable :style="{width: '100%'}">
            </el-input> -->
              <el-input
                v-model="activityData[selectedCategory].activityTarget"
                placeholder="请输入活动目标"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </div>
      </el-row>
      <el-row :gutter="15">
        <p id="title2">区域课程</p>
        <p>领域：安吉</p>
        <el-col :span="8">
          <el-form-item label="" prop="sex">
            <!-- <span>安吉</span> -->
            <!-- <el-select v-model="sizeForm.region2" :disabled='isDisabled' placeholder="请选择领域" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in formData.area2" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
        <div
          style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
          "
        >
          <el-col :span="8">
            <el-form-item label="活动名称">
              <!-- <el-input v-model="formData.name" :disabled='isDisabled' placeholder="请输入活动名称" type="textarea" :autosize="{minRows: 4, maxRows: 4}" clearable :style="{width: '100%'}">
            </el-input> -->
              <el-input
                v-model="form['fixedCategory1_1']"
                :disabled="isDisabled"
                placeholder="请输入活动名称"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="活动目标">
              <!-- <el-input v-model="formData.age" :disabled='isDisabled' placeholder="请输入活动目标" type="textarea" :autosize="{minRows: 4, maxRows: 4}" clearable :style="{width: '100%'}">
            </el-input> -->
              <el-input
                v-model="form['fixedCategory1_2']"
                :disabled="isDisabled"
                placeholder="请输入活动目标"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </div>
      </el-row>
      <el-row :gutter="15">
        <p id="title3">特色课程</p>
        <p>领域：特色</p>
        <el-col :span="8">
          <el-form-item label="" prop="sex">
            <!-- <span>特色</span> -->
            <!-- <el-select v-model="sizeForm.region3" :disabled='isDisabled' placeholder="请选择领域" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in formData.area3" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
        <div
          style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
          "
        >
          <el-col :span="8">
            <el-form-item label="活动名称" prop="name">
              <!-- <el-input v-model="formData.name" :disabled='isDisabled' placeholder="请输入活动名称" type="textarea" :autosize="{minRows: 4, maxRows: 4}" clearable :style="{width: '100%'}">
            </el-input> -->
              <el-input
                v-model="form['fixedCategory2_1']"
                :disabled="isDisabled"
                placeholder="请输入活动名称"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="活动目标" prop="age">
              <!-- <el-input v-model="formData.age" :disabled='isDisabled' placeholder="请输入活动目标" type="textarea" :autosize="{minRows: 4, maxRows: 4}" clearable :style="{width: '100%'}">
            </el-input> -->
              <el-input
                v-model="form['fixedCategory2_2']"
                :disabled="isDisabled"
                placeholder="请输入活动目标"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </div>
      </el-row>
      <el-row :gutter="15">
        <p id="title4">绘本课程</p>
        <p>领域：阅读</p>
        <el-col :span="8">
          <el-form-item label="" prop="sex">
            <!-- <span>阅读</span> -->
            <!-- <el-select v-model="sizeForm.region4" :disabled='isDisabled' placeholder="请选择领域" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in formData.area4" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
        <div
          style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
          "
        >
          <el-col :span="8">
            <el-form-item label="活动名称" prop="name">
              <!-- <el-input v-model="formData.name" :disabled='isDisabled' placeholder="请输入活动名称" type="textarea" :autosize="{minRows: 4, maxRows: 4}" clearable :style="{width: '100%'}">
            </el-input> -->
              <el-input
                v-model="form['fixedCategory3_1']"
                :disabled="isDisabled"
                placeholder="请输入活动名称"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="活动目标" prop="age">
              <!-- <el-input v-model="formData.age" :disabled='isDisabled' placeholder="请输入活动目标" type="textarea" :autosize="{minRows: 4, maxRows: 4}" clearable :style="{width: '100%'}">
            </el-input> -->
              <el-input
                v-model="form['fixedCategory3_2']"
                :disabled="isDisabled"
                placeholder="请输入活动目标"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </div>
      </el-row>

      <el-form-item
        size="large"
        v-if="!isDetailDisabled"
        style="text-align: right"
      >
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="openMessageBox">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getPlanList,
  editMonthPlan,
  addMonthPlan,
  queryMonthDetails,
  editMonthDetails,
} from "@/api/teach/monthPlan";
export default {
  components: {},
  dicts: ["sys_user_sex", "past_history"],
  data() {
    return {
      isDisabled: false,
      isDetailDisabled: false,
      sizeForm: {
        region1: "",
        region2: "",
        region3: "",
        region4: "",
      },
      selectedCategory: "", // 设置默认值为健康园本
      form: {
        // 初始化表单字段
        fixedCategory1_1: "",
        fixedCategory1_2: "",
        fixedCategory2_1: "",
        fixedCategory2_2: "",
        fixedCategory3_1: "",
        fixedCategory3_2: "",
        // ... 其他表单字段
      },
      categories: [
        { label: "健康园本", value: "健康园本" },
        { label: "语言园本", value: "语言园本" },
        { label: "社会园本", value: "社会园本" },
        { label: "科学园本", value: "科学园本" },
        { label: "计算园本", value: "计算园本" },
        { label: "音乐园本", value: "音乐园本" },
        { label: "绘画园本", value: "绘画园本" },
      ],
      formData: [],
      listData: [],
      selectData: [],
      rules: {
        physicalDate: [
          { required: true, message: "体检日期不能为空", trigger: "blur" },
        ],
        weight: [{ required: true, message: "体重不能为空", trigger: "blur" }],
        height: [{ required: true, message: "身高不能为空", trigger: "blur" }],
      },
      queryParams: {
        monthId: this.$route.query.monthID,
        // monthId: 6,
      },
      activityData: {
        健康园本: {
          activityName: "默认活动名称", // 设置默认值
          activityTarget: "1",
        },
        语言园本: {
          activityName: "1",
          activityTarget: "1",
        },
        社会园本: {
          activityName: "1",
          activityTarget: "1",
        },
        科学园本: {
          activityName: "1",
          activityTarget: "1",
        },
        计算园本: {
          activityName: "1",
          activityTarget: "1",
        },
        音乐园本: {
          activityName: "1",
          activityTarget: "1",
        },
        绘画园本: {
          activityName: "1",
          activityTarget: "1",
        },
        // 其他类别...
      }, // 存储每个领域对应的活动名称和活动目标
      // selectedCategory: null,
      // activityData: {},
    };
  },
  // watch: {
  //   selectedCategory(newCategory) {
  //     if (!this.activityData[newCategory]) {
  //       this.activityData[newCategory] = { activityName: "" };
  //     }
  //   },
  //   // ... 其他观察者 ...
  // },
  created() {
    this.getList(this.$route.query);
  },
  mounted() {
    this.activityData[this.selectedCategory].activityName = "默认活动名称";
    // const defaultCategory = this.activityData[this.selectedCategory];
    // console.log("defaultCategory", defaultCategory);
    //   if (defaultCategory) {
    //     defaultCategory.activityName = "默认活动名称";
    //     defaultCategory.activityTarget = "默认活动目标";
    //   }
    // console.log("ROW",this.selectedCategory)
  },
  methods: {
    handleCategoryChange() {
      // 打印选择的类别
      console.log("Selected Category:", this.selectedCategory);
    },
    // getList(row) {
    //   console.log("ROW",this.queryParams)
    //   this.loading = true;
    //   queryMonthDetails(this.queryParams).then((response) => {
    //     console.log("liebiao shus",response)
    //     this.loading = false;
    //   });
    // },
        /** 提交按钮 */
        openMessageBox() {
        this.$confirm('是否同步该班级所在年级其他班级的数据?', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          this.submitForm(1)
          console.log('111');
        }).catch(() => {
          this.submitForm(0)
          console.log('222');
        });
      },
    async getList(row) {
      console.log("ROW", row);
      console.log("monthID", this.$route.query.monthID);
      this.listData = row;
      const monthId = this.$route.query.monthID;
      try {
        this.loading = true;
        let params = {
          monthId: monthId,
        };
        const data = await queryMonthDetails(params);
        console.log("列表数据", data.data);
        if (data.data.length > 0) {
          // 构建领域与活动名称、活动目标的映射关系
          this.activityData = data.data.reduce((acc, curr) => {
            acc[curr.territory] = {
              activityName: curr.activityName,
              activityTarget: curr.activityTarget,
            };
            return acc;
          }, {});
          // this.total = data.total;
          // this.selectData = data.data
          // 处理接口返回的数据，根据 activityCurriculum 更新对应的表单字段
          data.data.forEach((item) => {
            switch (item.activityCurriculum) {
              case "区域课程":
                this.form.fixedCategory1_1 = item.activityName;
                this.form.fixedCategory1_2 = item.activityTarget;
                break;
              case "特色课程":
                this.form.fixedCategory2_1 = item.activityName;
                this.form.fixedCategory2_2 = item.activityTarget;
                break;
              case "绘本课程":
                this.form.fixedCategory3_1 = item.activityName;
                this.form.fixedCategory3_2 = item.activityTarget;
                break;
              // 可根据需要添加其他课程的处理
              default:
                break;
            }
          });
        }

        this.loading = false;
      } catch (e) {
        console.log(e);
      }
    },
    submitForm(val) {
      this.formData = []
      const baseInfo = {
        classId: this.$route.query.classId,
        createBy: "",
        createTime: "",
        id: "",
        monthId: this.$route.query.monthID,
        monthTime: this.$route.query.monthTime,
        params: {},
        remark: "",
        schoolCode: this.$route.query.schoolCode,
        searchValue: "",
        updateBy: "",
        updateTime: "",
        inType:val === 1 ? 1 : 0
      };
      // console.log("三组数据",this.listData)
      // 处理第一组数据
      const titleElement1 = document.getElementById("title1");
      const titleText1 = titleElement1.textContent;
      console.log(titleText1);
      for (const category of this.categories) {
        const categoryValue = category.value;
        if (
          this.form[`${categoryValue}_1`] &&
          this.form[`${categoryValue}_2`]
        ) {
          const obj = {
            activityCurriculum: titleText1,
            territory: category.label,
            activityName: this.form[`${categoryValue}_1`],
            activityTarget: this.form[`${categoryValue}_2`],
          };
          const mergedObject = { ...baseInfo, ...obj }; // 合并基础信息和需要添加的其他属性
          this.formData.push(mergedObject); // 将合并后的对象推送到数组中
          // this.formData.push(obj);
        }
      }

      // 处理第二组固定类别的数据
      const titleElement2 = document.getElementById("title2");
      const titleText2 = titleElement2.textContent;
      if (this.form["fixedCategory1_1"] && this.form["fixedCategory1_2"]) {
        const obj2 = {
          activityCurriculum: titleText2,
          territory: "安吉",
          activityName: this.form["fixedCategory1_1"],
          activityTarget: this.form["fixedCategory1_2"],
        };
        const mergedObject2 = { ...baseInfo, ...obj2 }; // 合并基础信息和需要添加的其他属性
        this.formData.push(mergedObject2); // 将合并后的对象推送到数组中
        // this.formData.push(obj2);
      }

      // 处理第三组固定类别的数据
      const titleElement3 = document.getElementById("title3");
      const titleText3 = titleElement3.textContent;
      if (this.form["fixedCategory2_1"] && this.form["fixedCategory2_2"]) {
        const obj3 = {
          activityCurriculum: titleText3,
          territory: "特色",
          activityName: this.form["fixedCategory2_1"],
          activityTarget: this.form["fixedCategory2_2"],
        };
        const mergedObject3 = { ...baseInfo, ...obj3 }; // 合并基础信息和需要添加的其他属性
        this.formData.push(mergedObject3); // 将合并后的对象推送到数组中
        // this.formData.push(obj3);
      }

      // 处理第四组固定类别的数据
      const titleElement4 = document.getElementById("title4");
      const titleText4 = titleElement4.textContent;
      if (this.form["fixedCategory3_1"] && this.form["fixedCategory3_2"]) {
        const obj4 = {
          activityCurriculum: titleText4,
          territory: "阅读",
          activityName: this.form["fixedCategory3_1"],
          activityTarget: this.form["fixedCategory3_2"],
        };
        const mergedObject4 = { ...baseInfo, ...obj4 }; // 合并基础信息和需要添加的其他属性
        this.formData.push(mergedObject4); // 将合并后的对象推送到数组中
        // this.formData.push(obj4);
      }
      // const obj5 = {

      // }
      // console.log("其余的form数据",this.formData); // 打印出表单数据数组

      // console.log("打印",this.sizeForm.region4)
      this.$refs["elForm"].validate((valid) => {
        console.log("submit!", valid);
        if (!valid) return;
        // this.formData.schoolCode = this.$store.getters.schoolCode,
        console.log("入参", this.formData);
        editMonthDetails(this.formData).then((res) => {
          console.log("res", res);
          if (res.code == 200) {
            this.msgSuccess("新增成功");
            this.$router.push({
              path: "/gradenSystem/monthplan",
              // query: {
              //   classId: this.formData.stuId,
              //   // result: result, // 传递result数据
              // },
            });
          } else {
            this.msgError(response.msg);
          }
        });
      });
    },
    resetForm() {
      this.$router.push({
        path: "/gradenSystem/monthplan",
        query: {
          classId: this.formData.stuId,
          // result: result, // 传递result数据
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.check-list {
  padding: 5px 30px;
  box-sizing: border-box;
  background-color: #f2f3f5;
  .el-row {
    background-color: #fff;
    margin: 20px 0;
    padding: 20px;
    border-radius: 5px;
    .el-col {
      .el-date-editor {
        width: 100%;
      }
    }
    .flex {
      display: flex;
    }
  }
  ::v-deep .el-form-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
    .el-form-item__label {
      width: 100% !important;
      text-align: left;
    }
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
</style>
